<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Talking Clown Plays Music</title>
  <link href="css/clown_animate.css" rel="stylesheet" type="text/css" />
  <link href="css/hair.css" rel="stylesheet" type="text/css" />
  <link href="css/moving.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="bg">
<div id="clown_bg" class="reflection">
  <!-- out_box -->
  <div id="out_box" class="static">
    <!-- face -->
    <div id="face">
      <!-- top_face -->
      <div id="top_face" class="gradient">
        <!-- eyebrow -->
        <div id="eyebrow">
          <div id="left_eyebrow_box">
            <div id="eyebrow_left"></div>
          </div>
          <div id="right_eyebrow_box">
            <div id="eyebrow_right"></div>
          </div>
        </div>
        <!-- end of eyebrow -->  

        <!-- eyes -->
        <div id="eye">
          <div class="eye_left eye1">
            <div class="eyes1">
              <div class="eyes2"></div>
            </div>
          </div>
          <div class="eye_right eye1">
            <div class="eyes1">
              <div class="eyes2"></div>
            </div>
          </div>
        </div>
        <!-- end of eyes -->

        <!-- nose -->
        <div id="nose"></div>
        <!-- end of nose -->

        <!-- Zygomatic -->
        <div id="Zygomatic">
          <div id="Zygomatic_left" class="Zygomatic1"></div>
          <div id="Zygomatic_right" class="Zygomatic1"></div>
        </div>
        <!-- end of Zygomatic -->

      </div>
      <!-- end of top_face -->

      <!-- down_face -->
      <div id="down_face" class="gradient">
        <div id="chin">
          <div id="Ldown_face" class="gradient" ></div>
          <div id="Rdown_face" class="gradient"></div>
        </div>
        <!-- mouth -->
        <div id="mouth">
          <div id="mouth_left">
            <div id="Lmouth" class="mouth1">
              <div id="Lmouth1" class="mouth2"></div>
            </div>
          </div>
          <div id="mouth_right">
            <div id="Rmouth" class="mouth1">
              <div id="Rmouth1" class="mouth2"></div>
            </div>
          </div>
          <div id="lips">
            <div id="or1"></div>
            <div id="oral">
              <div id="tongue"></div>
            </div>
          </div>
        </div>
        <!-- end of mouth -->
      </div>
      <!-- end of down_face -->
    </div>
    <!-- end of face -->

    <!-- hair -->
    <div id="hair">
      <div class="hair1 gradient1 radius1"></div>
      <div class="hair2 gradient2 radius2"></div>
      <div class="hair3 gradient3 radius3"></div> 
      <div class="hair4 gradient4 radius4"></div>
      <div class="hair5 gradient4 radius1"></div>
      <div class="hair6 gradient1 radius1"></div>
      <div class="hair7 gradient1 radius1"></div>
      <div class="hair8 gradient2 radius2"></div>
      <div class="hair9 gradient1 radius1"></div>
      <div class="hair10 gradient2 radius5"></div>
      <div class="hair11 gradient3 radius5"></div>
      <div class="hair12 gradient4 radius4"></div>
      <div class="hair13 gradient4 radius1"></div>
      <div class="hair14 gradient1 radius1"></div>
      <div class="hair15 gradient1 radius1"></div>
      <div class="hair16 gradient2 radius5"></div>      
    </div>
    <!-- end of hair -->      
  </div>
  <!-- end of out_box -->
  <div id="hat"><img src="images/hat.png" /></div>
  <!-- feet -->
  <div id="feet">
    <div id="left_foot"><img src="images/foot_left.png"/></div>
    <div id="right_foot"><img src="images/foot_right.png"/></div>
  </div>
  <!-- end of feet -->
  <button id="button_play">Play</button>
  <button id="button_stop">Stop</button>
  <button id="button_pause">Pause</button>
  <button id="button_next">Next</button>
</div>
</div>

<script type="text/javascript">
  function init() {
    var realHeight = document.documentElement.clientHeight;
    var realWidth =  document.documentElement.clientWidth;
    console.log(['height = ' + realHeight, 'width = ' + realWidth]);

    var elemBg = document.getElementById('bg');
    elemBg.style.height = realHeight + 'px';
    //elemBg.style.width = realWidth + 'px';
    elemBg.style.paddingTop = (realHeight - 600)/2 + 'px';
  };

  window.addEventListener("load", init(), false);
</script>
<script type="text/javascript" src="./javascript/beatdetektor.js"> </script>
<script type="text/javascript" src="./javascript/play_music.js"> </script>
</body>
</html>

